<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/css/layui.css">
    <style>
        .layui-table th{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <!--工具显示-->
    <div class="layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label">图书名称:</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <!--下拉列表-->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">故事</option>
                            <option value="1">小说</option>
                            <option value="2">科幻</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md2">
            <button type="button" class="layui-btn">查询</button>
        </div>
        <div class="layui-col-md2">
            <button type="button" class="layui-btn" id="btn-add">新增</button>
        </div>
    </div>

    <!--数据地方-->
    <div class="layui-row">
        <!--数据展示-->
        <table class="layui-table" lay-data="{width: 1100, height:300,
        url:'getAll', page:true, id:'tableList',limit:5,cellMinWidth: 50}" lay-filter="demo">
            <thead>
            <tr style="text-align: center">
                <th colspan="7">图书借阅系统</th>
            </tr>
            <tr>
                <!--layui怎么隐藏，怎么显示-->
                <th lay-data="{field:'id'}">主键Id</th>
                <th lay-data="{field:'categoryId'}">图书编号</th>
                <th lay-data="{field:'title'}">图书分类</th>
                <th lay-data="{field:'summary'}">图书名称</th>
                <th lay-data="{field:'uploaduser'}">作者</th>
                <th lay-data="{field:'createdate'}">时间</th>
                <th lay-data="{field:'isborrowed',toolbar:'#barDemo',width:250}">操作</th>
            </tr>
            </thead>
            <!--, templet:changeBookType   ,hide:true-->
        </table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/myjs/main.js"></script>
</body>
<script>
    function changeBookType(d){

        if(d.booktype==1){
            return "小说";
        }else if(d.booktype==2){
            return "文学";
        }else  if(d.booktype==3){
            return "传记";
        }else   if(d.booktype==4){
            return "艺术";
        }
    }
    //获取超链接
    function changeIsMark(d) {
        if(d.isborrowed==0){
            return "<a href='javascript:'  lay-event=\"edit\">未借阅</a>";
        }else if(d.isborrowed==1){
            return "<a href='javascript:' style='color: red'>已借阅</a>";
        }
    }
    //退出系统ajax
    $("#exit_system").bind("click",function(){
        if(confirm("您确认退出该系统吗")){
            window.location.href="exitSystem";
        }

    })
</script>
</html>